HTML W3schools

Introduction to HTML
What is an HTML File?
• HTML stands for Hyper Text Markup Language

• An HTML file is a text file containing small markup tags
• The markup tags tell the Web browser how to display the page
• An HTML file must have an htm or html file extension
• An HTML file can be created using a simple text editor
Do You Want to Try It?
If you are running Windows, start Notepad.
If you are on a Mac, start SimpleText.
In OSX start TextEdit and change the following preferences: Open the the "Format" menu and select
"Plain text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu
and select "Ignore rich text commands in HTML files". Your HTML code will probably not work if you
do not change the preferences above!
Type in the following text:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
Save the file as "mypage.htm".
Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A
dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created -
"mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for
example "C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.
Example Explained
The first tag in your HTML document is <html>. This tag tells your browser that this is the start of
an HTML document. The last tag in your document is </html>. This tag tells your browser that this
is the end of the HTML document.
The text between the <head> tag and the </head> tag is header information. Header information
is not displayed in the browser window.
The text between the <title> tags is the title of your document. The title is displayed in your
browser's caption.
The text between the <body> tags is the text that will be displayed in your browser.
The text between the <b> and </b> tags will be displayed in a bold font.
HTM or HTML Extension?
When you save an HTML file, you can use either the .htm or the .html extension. We have used
.htm in our examples. It might be a bad habit inherited from the past when some of the commonly
used software only allowed three letter extensions.
With newer software we think it will be perfectly safe to use .html.
Note on HTML Editors:
You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like
FrontPage or Dreamweaver, instead of writing your markup tags in a plain text file.
However, if you want to be a skillful Web developer, we strongly recommend that you use a plain
text editor to learn your primer HTML.
Frequently Asked Questions
Q: After I have edited an HTML file, I cannot view the result in my browser. Why?
A: Make sure that you have saved the file with a proper name and extension like "c:\mypage.htm".
Also make sure that you use the same name when you open the file in your browser.
Q: I have edited an HTML file, but the changes don't show in the browser. Why?
A: A browser caches pages so it doesn't have to read the same page twice. When you have modified
a page, the browser doesn't know that. Use the browser's refresh/reload button to force the
browser to reload the page.
Q: What browser should I use?

A: You can do all the training with all of the well-known browsers, like Internet Explorer, Firefox,
Netscape, or Opera. However, some of the examples in our advanced classes require the latest
versions of the browsers.
Q: Does my computer have to run Windows? What about a Mac?

A: You can do all your training on a non-Windows computer like a Mac.
HTML Elements
HTML documents are text files made up of HTML elements.
HTML elements are defined using HTML tags.
HTML Tags
• HTML tags are used to mark-up HTML elements

• HTML tags are surrounded by the two characters < and >
• The surrounding characters are called angle brackets
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is the end tag
• The text between the start and end tags is the element content
• HTML tags are not case sensitive, <b> means the same as <B>
HTML Elements
Remember the HTML example from the previous page:
<html>
<head>
<title>Title of page</title>
</head>
<body>
</body>
</html>
This is an HTML element:
<b>This text is bold</b>
The HTML element starts with a start tag: <b>

The content of the HTML element is: This text is bold
The HTML element ends with an end tag: </b>
The purpose of the <b> tag is to define an HTML element that should be displayed as bold.
This is also an HTML element:
<body>
</body>
This HTML element starts with the start tag <body>, and ends with the end tag </body>.
The purpose of the <body> tag is to define the HTML element that contains the body of the HTML
document.
Why do We Use Lowercase Tags?
We have just said that HTML tags are not case sensitive: <B> means the same as <b>. If you surf
the Web, you will notice that plenty of web sites use uppercase HTML tags in their source code. We
always use lowercase tags. Why?
If you want to follow the latest web standards, you should always use lowercase tags. The World
Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and
XHTML (the next generation HTML) demands lowercase tags.
Tag Attributes
Tags can have attributes. Attributes provide additional information to an HTML element.
The following tag defines an HTML table: <table>. With an added border attribute, you can tell the
browser that the table should have no borders: <table border="0">
Attributes always come in name/value pairs like this: name="value".
Attributes are always specified in the start tag of an HTML element.
Attributes and attribute values are also case-insensitive. However, the World Wide Web Consortium
(W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation, and
XHTML demands lowercase attributes/attribute values.
Always Quote Attribute Values
Attribute values should always be enclosed in quotes. Double style quotes are the most common,
but single style quotes are also allowed.
In some rare situations, like when the attribute value itself contains quotes, it is necessary to use
single quotes:
name='John "ShotGun" Nelson'
Basic HTML Tags

The most important tags in HTML are tags that define headings, paragraphs and line
breaks.
The best way to learn HTML is to work with examples. We have created a very nice HTML
editor for you. With this editor, you can edit the HTML source code if you like, and click on
a test button to view the result.
Try it Yourself - Examples
A very simple HTML document

This example is a very simple HTML document, with only a minimum of HTML tags. It demonstrates
how the text inside a body element is displayed in the browser.
Simple paragraphs
This example demonstrates how the text inside paragraph elements is displayed in the browser.
(You can find more examples at the bottom of this page)
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines
the smallest heading.
<h1>This is a heading</h1>
HTML automatically adds an extra blank line before and after a heading.
Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML automatically adds an extra blank line before and after a paragraph.
Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The
<br> tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>
The <br> tag is an empty tag. It has no closing tag.
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored
by the browser. You can use comments to explain your code, which can help you when you edit the
source code at a later date.

Note that you need an exclamation point after the opening bracket, but not before the closing
bracket.
Basic Notes - Useful Tips
When you write HTML text, you can never be sure how the text is displayed in another browser.
Some people have large computer displays, some have small. The text will be reformatted every
time the user resizes his window. Never try to format the text in your editor by adding empty lines
and spaces to the text.
HTML will truncate the spaces in your text. Any number of spaces count as one. Some extra
information: In HTML a new line counts as one space.
Using empty paragraphs <p> to insert blank lines is a bad habit. Use the <br> tag instead. (But
don't use the <br> tag to create lists. Wait until you have learned about HTML lists.)
You might have noticed that paragraphs can be written without the closing tag </p>. Don't rely on
it. The next version of HTML will not allow you to skip ANY closing tags.
HTML automatically adds an extra blank line before and after some elements, like before and after a
paragraph, and before and after a heading.
We use a horizontal rule (the <hr> tag), to separate the sections in our tutorials.
More Examples
More paragraphs
This example demonstrates some of the default behaviors of paragraph elements.
Line breaks
This example demonstrates the use of line breaks in an HTML document.
Poem problems
This example demonstrates some problems with HTML formatting.
Headings
This example demonstrates the tags that display headings in an HTML document.
Center aligned heading

This example demonstrates a center aligned heading.
Horizontal rule
This example demonstrates how to insert a horizontal rule.
Hidden comments
This example demonstrates how to insert a hidden comment in the HTML source code.
Background color
This example demonstrates adding a background-color to an HTML page.
Basic HTML Tags
Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule

</script>
VBScript:
<script type="text/vbscript">

</script>
The <noscript> Tag
In addition to hiding the script inside a comment, you can also add a <noscript> tag.
The <noscript> tag is used to define an alternate text if a script is NOT executed. This tag is used
for browsers that recognize the <script> tag, but do not support the script inside, so these browsers
will display the text inside the <noscript> tag instead. However, if a browser supports the script
inside the <script> tag it will ignore the <noscript> tag.
Example
JavaScript:

</script>
<noscript>Your browser does not support JavaScript!</noscript>
VBScript:
<script type="text/vbscript">

</script>
<noscript>Your browser does not support VBScript!</noscript>
Script Tags
Tag Description
<script> Defines a script
<noscript> Defines an alternate text if the script is not executed
<object> Defines an embedded object
<param> Defines run-time settings (parameters) for an object
<applet> Deprecated. Use <object> instead
HTML 4.0 Standard Attributes
HTML tags can have attributes. The special attributes for each tag are listed under each tag
description. The attributes listed here are the core and language attributes that are standard for all
tags (with a few exceptions):
Core Attributes
Not valid in base, head, html, meta, param, script, style, and title elements.
Attribute Value Description

class class_rule or style_rule The class of the element
id id_name A unique id for the element
style style_definition An inline style definition
title tooltip_text A text to display in a tool tip
Language Attributes
Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.

dir ltr | rtl Sets the text direction
lang language_code Sets the language code
Keyboard Attributes

accesskey character Sets a keyboard shortcut to access an
element
tabindex number Sets the tab order of an element
HTML 4.01 / XHTML 1.0 Reference

Ordered Alphabetically
• NN: indicates the earliest version of Netscape that supports the tag
• IE: indicates the earliest version of Internet Explorer that supports the tag
• DTD: indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and
F=Frameset
Tag Description NN IE DTD

 Defines a comment 3.0 3.0 STF
<!DOCTYPE> Defines the document type STF
<a> Defines an anchor 3.0 3.0 STF
<abbr> Defines an abbreviation 6.2 STF
<acronym> Defines an acronym 6.2 4.0 STF
<address> Defines an address element 4.0 4.0 STF
<applet> Deprecated. Defines an applet 2.0 3.0 TF
<area> Defines an area inside an image map 3.0 3.0 STF
<b> Defines bold text 3.0 3.0 STF
<base> Defines a base URL for all the links in a page 3.0 3.0 STF
<basefont> Deprecated. Defines a base font 3.0 3.0 TF
<bdo> Defines the direction of text display 6.2 5.0 STF
<big> Defines big text 3.0 3.0 STF
<blockquote> Defines a long quotation 3.0 3.0 STF
<body> Defines the body element 3.0 3.0 STF
<br> Inserts a single line break 3.0 3.0 STF
<button> Defines a push button 6.2 4.0 STF
<caption> Defines a table caption 3.0 3.0 STF
<center> Deprecated. Defines centered text 3.0 3.0 TF
<cite> Defines a citation 3.0 3.0 STF
<code> Defines computer code text 3.0 3.0 STF
<col> Defines attributes for table columns 3.0 STF
<colgroup> Defines groups of table columns 3.0 STF
<dd> Defines a definition description 3.0 3.0 STF
<del> Defines deleted text 6.2 4.0 STF
<dir> Deprecated. Defines a directory list 3.0 3.0 TF
<div> Defines a section in a document 3.0 3.0 STF
<dfn> Defines a definition term 3.0 STF
<dl> Defines a definition list 3.0 3.0 STF
<dt> Defines a definition term 3.0 3.0 STF
<em> Defines emphasized text 3.0 3.0 STF
<fieldset> Defines a fieldset 6.2 4.0 STF
<font> Deprecated. Defines text font, size, and color 3.0 3.0 TF
<form> Defines a form 3.0 3.0 STF
<frame> Defines a sub window (a frame) 3.0 3.0 F
<frameset> Defines a set of frames 3.0 3.0 F
<h1> to <h6> Defines header 1 to header 6 3.0 3.0 STF
<head> Defines information about the document 3.0 3.0 STF
<hr> Defines a horizontal rule 3.0 3.0 STF
<html> Defines an html document 3.0 3.0 STF
<i> Defines italic text 3.0 3.0 STF
<iframe> Defines an inline sub window (frame) 6.0 4.0 TF
<img> Defines an image 3.0 3.0 STF
<input> Defines an input field 3.0 3.0 STF
<ins> Defines inserted text 6.2 4.0 STF
<isindex> Deprecated. Defines a single-line input field 3.0 3.0 TF
<kbd> Defines keyboard text 3.0 3.0 STF
<label> Defines a label for a form control 6.2 4.0 STF
<legend> Defines a title in a fieldset 6.2 4.0 STF
<li> Defines a list item 3.0 3.0 STF
<link> Defines a resource reference 4.0 3.0 STF
<map> Defines an image map 3.0 3.0 STF
<menu> Deprecated. Defines a menu list 3.0 3.0 TF
<meta> Defines meta information 3.0 3.0 STF
<noframes> Defines a noframe section 3.0 3.0 TF
<noscript> Defines a noscript section 3.0 3.0 STF
<object> Defines an embedded object 3.0 STF
<ol> Defines an ordered list 3.0 3.0 STF
<optgroup> Defines an option group 6.0 6.0 STF
<option> Defines an option in a drop-down list 3.0 3.0 STF
<p> Defines a paragraph 3.0 3.0 STF
<param> Defines a parameter for an object 3.0 3.0 STF
<pre> Defines preformatted text 3.0 3.0 STF
<q> Defines a short quotation 6.2 STF
<s> Deprecated. Defines strikethrough text 3.0 3.0 TF
<samp> Defines sample computer code 3.0 3.0 STF
<script> Defines a script 3.0 3.0 STF
<select> Defines a selectable list 3.0 3.0 STF
<small> Defines small text 3.0 3.0 STF
<span> Defines a section in a document 4.0 3.0 STF
<strike> Deprecated. Defines strikethrough text 3.0 3.0 TF
<strong> Defines strong text 3.0 3.0 STF
<style> Defines a style definition 4.0 3.0 STF
<sub> Defines subscripted text 3.0 3.0 STF
<sup> Defines superscripted text 3.0 3.0 STF
<table> Defines a table 3.0 3.0 STF
<tbody> Defines a table body 4.0 STF
<td> Defines a table cell 3.0 3.0 STF
<textarea> Defines a text area 3.0 3.0 STF
<tfoot> Defines a table footer 4.0 STF
<th> Defines a table header 3.0 3.0 STF
<thead> Defines a table header 4.0 STF
<title> Defines the document title 3.0 3.0 STF
<tr> Defines a table row 3.0 3.0 STF
<tt> Defines teletype text 3.0 3.0 STF
<u> Deprecated. Defines underlined text 3.0 3.0 TF
<ul> Defines an unordered list 3.0 3.0 STF
<var> Defines a variable 3.0 3.0 STF
<xmp> Deprecated. Defines preformatted text 3.0 3.0
HTML 4.01 / XHTML 1.0 Reference

Ordered by Function
• NN: indicates the earliest version of Netscape that supports the tag
• IE: indicates the earliest version of Internet Explorer that supports the tag
• DTD: indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and
F=Frameset
Start tag Purpose NN IE DTD
Basic Tags
<!DOCTYPE> Defines the document type STF
<html> Defines an html document 3.0 3.0 STF
<body> Defines the body element 3.0 3.0 STF
<h1> to <h6> Defines header 1 to header 6 3.0 3.0 STF
<p> Defines a paragraph 3.0 3.0 STF
<br> Inserts a single line break 3.0 3.0 STF
<hr> Defines a horizontal rule 3.0 3.0 STF
 Defines a comment 3.0 3.0 STF
Char Format
<b> Defines bold text 3.0 3.0 STF
<font> Deprecated. Defines text font, size, and color 3.0 3.0 TF
<i> Defines italic text 3.0 3.0 STF
<em> Defines emphasized text 3.0 3.0 STF
<big> Defines big text 3.0 3.0 STF
<strong> Defines strong text 3.0 3.0 STF
<small> Defines small text 3.0 3.0 STF
<sup> Defines superscripted text 3.0 3.0 STF
<sub> Defines subscripted text 3.0 3.0 STF
<bdo> Defines the direction of text display 6.2 5.0 STF
<u> Deprecated. Defines underlined text 3.0 3.0 TF
Output
<pre> Defines preformatted text 3.0 3.0 STF
<code> Defines computer code text 3.0 3.0 STF
<tt> Defines teletype text 3.0 3.0 STF
<kbd> Defines keyboard text 3.0 3.0 STF
<var> Defines a variable 3.0 3.0 STF
<dfn> Defines a definition term 3.0 STF
<samp> Defines sample computer code 3.0 3.0 STF
<xmp> Deprecated. Defines preformatted text 3.0 3.0
Blocks
<acronym> Defines an acronym 6.2 4.0 STF
<abbr> Defines an abbreviation 6.2 STF
<address> Defines an address element 4.0 4.0 STF
<blockquote> Defines a long quotation 3.0 3.0 STF
<center> Deprecated. Defines centered text 3.0 3.0 TF
<q> Defines a short quotation 6.2 4.0 STF
<cite> Defines a citation 3.0 3.0 STF
<ins> Defines inserted text 6.2 4.0 STF
<del> Defines deleted text 6.2 4.0 STF
<s> Deprecated. Defines strikethrough text 3.0 3.0 TF
<strike> Deprecated. Defines strikethrough text 3.0 3.0 TF
Links
<a> Defines an anchor 3.0 3.0 STF
<link> Defines a resource reference 4.0 3.0 STF
Frames
<frame> Defines a sub window (a frame) 3.0 3.0 F
<frameset> Defines a set of frames 3.0 3.0 F
<noframes> Defines a noframe section 3.0 3.0 TF
<iframe> Defines an inline sub window (frame) 6.0 4.0 TF
Input
<form> Defines a form 3.0 3.0 STF
<input> Defines an input field 3.0 3.0 STF
<textarea> Defines a text area 3.0 3.0 STF
<button> Defines a push button 6.2 4.0 STF
<select> Defines a selectable list 3.0 3.0 STF
<optgroup> Defines an option group 6.0 6.0 STF
<option> Defines an item in a list box 3.0 3.0 STF
<label> Defines a label for a form control 6.2 4.0 STF
<fieldset> Defines a fieldset 6.2 4.0 STF
<legend> Defines a title in a fieldset 6.2 4.0 STF
<isindex> Deprecated. Defines a single-line input field 3.0 3.0 TF
Lists
<ul> Defines an unordered list 3.0 3.0 STF
<ol> Defines an ordered list 3.0 3.0 STF
<li> Defines a list item 3.0 3.0 STF
<dir> Deprecated. Defines a directory list 3.0 3.0 TF
<dl> Defines a definition list 3.0 3.0 STF
<dt> Defines a definition term 3.0 3.0 STF
<dd> Defines a definition description 3.0 3.0 STF
<menu> Deprecated. Defines a menu list 3.0 3.0 TF
Images
<img> Defines an image 3.0 3.0 STF
<map> Defines an image map 3.0 3.0 STF
<area> Defines an area inside an image map 3.0 3.0 STF
Tables
<table> Defines a table 3.0 3.0 STF
<caption> Defines a table caption 3.0 3.0 STF
<th> Defines a table header 3.0 3.0 STF
<tr> Defines a table row 3.0 3.0 STF
<td> Defines a table cell 3.0 3.0 STF
<thead> Defines a table header 4.0 STF
<tbody> Defines a table body 4.0 STF
<tfoot> Defines a table footer 4.0 STF
<col> Defines attributes for table columns 3.0 STF
<colgroup> Defines groups of table columns 3.0 STF
Styles
<style> Defines a style definition 4.0 3.0 STF
<div> Defines a section in a document 3.0 3.0 STF
<span> Defines a section in a document 4.0 3.0 STF
Meta Info
<head> Defines information about the document 3.0 3.0 STF
<title> Defines the document title 3.0 3.0 STF
<meta> Defines meta information 3.0 3.0 STF
<base> Defines a base URL for all the links in a page 3.0 3.0 STF
<basefont> Deprecated. Defines a base font 3.0 3.0 TF
Programming
<script> Defines a script 3.0 3.0 STF
<noscript> Defines a noscript section 3.0 3.0 STF
<applet> Deprecated. Defines an applet 2.0 3.0 TF
<object> Defines an embedded object 3.0 STF
<param> Defines a parameter for an object 3.0 3.0 STF
HTML Standard Attributes

HTML tags can have attributes. The special attributes for each tag are listed under each tag
description. The attributes listed here are the core and language attributes that are standard for all
tags (with a few exceptions).
Core Attributes
Not valid in base, head, html, meta, param, script, style, and title elements.

class class_rule or style_rule The class of the element
id id_name A unique id for the element
style style_definition An inline style definition
title tooltip_text A text to display in a tool tip
Language Attributes
Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.

dir ltr | rtl Sets the text direction
lang language_code Sets the language code
Keyboard Attributes

accesskey character Sets a keyboard shortcut to access an
element
tabindex number Sets the tab order of an element
HTML Event Attributes

New to HTML 4.0 was the ability to let HTML events trigger actions in the browser, like starting a
JavaScript when a user clicks on an HTML element. Below is a list of attributes that can be inserted
into HTML tags to define event actions.
If you want to learn more about programming with these events, you should study our JavaScript
tutorial and our DHTML tutorial.
Window Events
Only valid in body and frameset elements

onload script Script to be run when a document loads
onunload script Script to be run when a document unloads
Form Element Events
Only valid in form elements.

onchange script Script to be run when the element changes
onsubmit script Script to be run when the form is submitted
onreset script Script to be run when the form is reset
onselect script Script to be run when the element is selected
onblur script Script to be run when the element loses focus
onfocus script Script to be run when the element gets focus
Keyboard Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title
elements.

onkeydown script What to do when key is pressed
onkeypress script What to do when key is pressed and released
onkeyup script What to do when key is released
Mouse Events
Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title
elements.

onclick script What to do on a mouse click
ondblclick script What to do on a mouse doubleclick
onmousedown script What to do when mouse button is pressed
onmousemove script What to do when mouse pointer moves
onmouseover script What to do when mouse pointer moves over an element
onmouseout script What to do when mouse pointer moves out of an element
onmouseup script What to do when mouse button is released
HTML Color Names

HTML Colors
The table below provides a list of the color names that are supported by all major browsers.
Note: If you want your pages to validate with an HTML or a CSS validator, W3C has listed 16 color
names that you can use: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple,
red, silver, teal, white, and yellow. If you want to use other colors, you must specify their RGB or
HEX value.
Click on a color name (or a hex value) to view the color as the background-color along with different
text colors:
Color Name Color HEX Color

AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGrey #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkSlateGrey #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DimGrey #696969
DodgerBlue #1E90FF
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Grey #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGray #D3D3D3
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateGray #778899
LightSlateGrey #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
SlateGrey #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32
HTML 7-BIT ASCII Reference

HTML and XHTML uses standard 7-BIT ASCII when transmitting data over the Web.
7-BIT ASCII represents 128 different character values (0-127).
7-BIT Printable ASCII Characters
Result Description Entity Number

space
! exclamation mark !
" quotation mark "
# number sign #
$ dollar sign $
% percent sign %
& ampersand &
' apostrophe '
( left parenthesis (
) right parenthesis )
* asterisk *
+ plus sign +
, comma ,
- hyphen -
. period .
/ slash /
0 digit 0 0
1 digit 1 1
2 digit 2 2
3 digit 3 3
4 digit 4 4
5 digit 5 5
6 digit 6 6
7 digit 7 7
8 digit 8 8
9 digit 9 9
: colon :
; semicolon ;
< less-than <
= equals-to =
> greater-than >
? question mark ?
@ at sign @
A uppercase A A
B uppercase B B
C uppercase C C
D uppercase D D
E uppercase E E
F uppercase F F
G uppercase G G
H uppercase H H
I uppercase I I
J uppercase J J
K uppercase K K
L uppercase L L
M uppercase M M
N uppercase N N
O uppercase O O
P uppercase P P
Q uppercase Q Q
R uppercase R R
S uppercase S S
T uppercase T T
U uppercase U U
V uppercase V V
W uppercase W W
X uppercase X X
Y uppercase Y Y
Z uppercase Z Z
[ left square bracket [
\ backslash \
] right square bracket ]
^ caret ^
_ underscore _
` grave accent `
a lowercase a a
b lowercase b b
c lowercase c c
d lowercase d d
e lowercase e e
f lowercase f f
g lowercase g g
h lowercase h h
i lowercase i i
j lowercase j j
k lowercase k k
l lowercase l l
m lowercase m m
n lowercase n n
o lowercase o o
p lowercase p p
q lowercase q q
r lowercase r r
s lowercase s s
t lowercase t t
u lowercase u u
v lowercase v v
w lowercase w w
x lowercase x x
y lowercase y y
z lowercase z z
{ left curly brace {
| vertical bar |
} right curly brace }
~ tilde ~
7-BIT ASCII Device Control Characters
ASCII device control characters were originally designed to control hardware devices like printers
and tape drives. These characters have nothing to do inside any HTML document.
Result Description Entity Number

NUL null character
SOH start of header
STX start of text
ETX end of text
EOT end of transmission
ENQ enquiry
ACK acknowledge
BEL bell (ring)
BS backspace
HT horizontal tab
LF line feed

VT vertical tab
FF form feed
CR carriage return
SO shift out
SI shift in
DLE data link escape
DC1 device control 1
NAK negative acknowledge
SYN synchronize
ETB end transmission block
CAN cancel
EM end of medium
SUB substitute
ESC escape
FS file separator
GS group separator
RS record separator
US unit separator
DEL delete (rubout)
HTML 4.01 Entities Reference

HTML 4.01 supports the ISO 8859-1 (Latin-1) character set.
The lower part of ISO-8859-1 (codes from 0-127) is the original 7-BIT ASCII standard. Most of
these characters can be used without a character reference.
The higher part of ISO-8859-1 (codes from 160-255) can all be used using character entity names.
Note that the entity names are case sensitive.
ASCII Entities with new Entity Names

" quotation mark " "
' apostrophe ' (does not work in IE) '
& ampersand & &
< less-than < <
> greater-than > >
ISO 8859-1 Symbol Entities

non-breaking space
¡ inverted exclamation mark ¡ ¡
¤ currency ¤ ¤
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
¦ broken vertical bar ¦ ¦
§ section § §
¨ spacing diaeresis ¨ ¨
© copyright © ©
ª feminine ordinal indicator ª ª
« angle quotation mark (left) « «
¬ negation ¬ ¬
soft hyphen
® registered trademark ® ®
™ trademark ™ ™
¯ spacing macron ¯ ¯
° degree ° °
± plus-or-minus ± ±
² superscript 2 ² ²
³ superscript 3 ³ ³
´ spacing acute ´ ´
µ micro µ µ
¶ paragraph ¶ ¶
· middle dot · ·
¸ spacing cedilla ¸ ¸
¹ superscript 1 ¹ ¹
º masculine ordinal indicator º º
» angle quotation mark (right) » »
¼ fraction 1/4 ¼ ¼
½ fraction 1/2 ½ ½
¾ fraction 3/4 ¾ ¾
¿ inverted question mark ¿ ¿
× multiplication × ×
÷ division ÷ ÷
ISO 8859-1 Character Entities

À capital a, grave accent À À
Á capital a, acute accent Á Á
Â capital a, circumflex accent Â Â
Ã capital a, tilde Ã Ã
Ä capital a, umlaut mark Ä Ä
Å capital a, ring Å Å
Æ capital ae Æ Æ
Ç capital c, cedilla Ç Ç
È capital e, grave accent È È
É capital e, acute accent É É
Ê capital e, circumflex accent Ê Ê
Ë capital e, umlaut mark Ë Ë
Ì capital i, grave accent Ì Ì
Í capital i, acute accent Í Í
Î capital i, circumflex accent Î Î
Ï capital i, umlaut mark Ï Ï
Ð capital eth, Icelandic Ð Ð
Ñ capital n, tilde Ñ Ñ
Ò capital o, grave accent Ò Ò
Ó capital o, acute accent Ó Ó
Ô capital o, circumflex accent Ô Ô
Õ capital o, tilde Õ Õ
Ö capital o, umlaut mark Ö Ö
Ø capital o, slash Ø Ø
Ù capital u, grave accent Ù Ù
Ú capital u, acute accent Ú Ú
Û capital u, circumflex accent Û Û
Ü capital u, umlaut mark Ü Ü
Ý capital y, acute accent Ý Ý
Þ capital THORN, Icelandic Þ Þ
ß small sharp s, German ß ß
à small a, grave accent à à
á small a, acute accent á á
â small a, circumflex accent â â
ã small a, tilde ã ã
ä small a, umlaut mark ä ä
å small a, ring å å
æ small ae æ æ
ç small c, cedilla ç ç
è small e, grave accent è è
é small e, acute accent é é
ê small e, circumflex accent ê ê
ë small e, umlaut mark ë ë
ì small i, grave accent ì ì
í small i, acute accent í í
î small i, circumflex accent î î
ï small i, umlaut mark ï ï
ð small eth, Icelandic ð ð
ñ small n, tilde ñ ñ
ò small o, grave accent ò ò
ó small o, acute accent ó ó
ô small o, circumflex accent ô ô
õ small o, tilde õ õ
ö small o, umlaut mark ö ö
ø small o, slash ø ø
ù small u, grave accent ù ù
ú small u, acute accent ú ú
û small u, circumflex accent û û
ü small u, umlaut mark ü ü
ý small y, acute accent ý ý
þ small thorn, Icelandic þ þ
ÿ small y, umlaut mark ÿ ÿ
Some Other Entities supported by HTML

Œ capital ligature OE &OElig; Œ
œ small ligature oe &oelig; œ
Š capital S with caron &Scaron; Š
š small S with caron &scaron; š
Ÿ capital Y with diaeres &Yuml; Ÿ
ˆ modifier letter circumflex accent &circ; ˆ
˜ small tilde &tilde; ˜
en space &ensp;
em space &emsp;
thin space
‌ zero width non-joiner &zwnj; ‌
‍ zero width joiner &zwj; ‍
left-to-right mark &lrm; ‎
right-to-left mark &rlm; ‏
– en dash – –
— em dash — —
‘ left single quotation mark ‘ ‘
’ right single quotation mark ’ ’
‚ single low-9 quotation mark &sbquo; ‚
“ left double quotation mark “ “
” right double quotation mark ” ”
„ double low-9 quotation mark &bdquo; „
† dagger &dagger; †
‡ double dagger &Dagger; ‡
… horizontal ellipsis … …
‰ per mille &permil; ‰
‹ single left-pointing angle quotation &lsaquo; ‹
› single right-pointing angle quotation &rsaquo; ›
€ euro € €
HTML URL-encoding Reference

Below is a reference of ASCII characters in URL-encoding form (hexadecimal format).
Hexadecimal values can be used to display non-standard letters and characters in

browsers and plug-ins.
Try It
Type some text or an ASCII value in the input field below, and click on the "URL Encode" button to
see the URL-encoding.
URL-encoding from %00 to %8f
ASCII Value URL-encode ASCII Value URL-encode ASCII Value URL-encode

æ %00 0 %30 ` %60
%01 1 %31 a %61
%02 2 %32 b %62
%03 3 %33 c %63
%04 4 %34 d %64
%05 5 %35 e %65
%06 6 %36 f %66
%07 7 %37 g %67
backspace %08 8 %38 h %68
tab %09 9 %39 i %69
linefeed %0a : %3a j %6a
%0b ; %3b k %6b
%0c < %3c l %6c
c return %0d = %3d m %6d
%0e > %3e n %6e
%0f ? %3f o %6f
%10 @ %40 p %70
%11 A %41 q %71
%12 B %42 r %72
%13 C %43 s %73
%14 D %44 t %74
%15 E %45 u %75
%16 F %46 v %76
%17 G %47 w %77
%18 H %48 x %78
%19 I %49 y %79
%1a J %4a z %7a
%1b K %4b { %7b
%1c L %4c | %7c
%1d M %4d } %7d
%1e N %4e ~ %7e
%1f O %4f %7f
space %20 P %50 € %80
! %21 Q %51 %81
" %22 R %52 ‚ %82
# %23 S %53 ƒ %83
$ %24 T %54 „ %84
% %25 U %55 … %85
& %26 V %56 † %86
' %27 W %57 ‡ %87
( %28 X %58 ˆ %88
) %29 Y %59 ‰ %89
* %2a Z %5a Š %8a
+ %2b [ %5b ‹ %8b
, %2c \ %5c Œ %8c
- %2d ] %5d %8d
. %2e ^ %5e Ž %8e
/ %2f _ %5f %8f
URL-encoding from %90 to %ff
ASCII Value URL-encode ASCII Value URL-encode ASCII Value URL-encode

%90 À %c0 ð %f0
‘ %91 Á %c1 ñ %f1
’ %92 Â %c2 ò %f2
“ %93 Ã %c3 ó %f3
” %94 Ä %c4 ô %f4
• %95 Å %c5 õ %f5
– %96 Æ %c6 ö %f6
— %97 Ç %c7 ÷ %f7
˜ %98 È %c8 ø %f8
™ %99 É %c9 ù %f9
š %9a Ê %ca ú %fa
› %9b Ë %cb û %fb
œ %9c Ì %cc ü %fc
%9d Í %cd ý %fd
ž %9e Î %ce þ %fe
Ÿ %9f Ï %cf ÿ %ff
%a0 Ð %d0
¡ %a1 Ñ %d1
¢ %a2 Ò %d2
£ %a3 Ó %d3
%a4 Ô %d4
¥ %a5 Õ %d5
| %a6 Ö %d6
§ %a7 %d7
¨ %a8 Ø %d8
© %a9 Ù %d9
ª %aa Ú %da
« %ab Û %db
¬ %ac Ü %dc
¯ %ad Ý %dd
® %ae Þ %de
¯ %af ß %df
° %b0 à %e0
± %b1 á %e1
² %b2 â %e2
³ %b3 ã %e3
´ %b4 ä %e4
µ %b5 å %e5
¶ %b6 æ %e6
· %b7 ç %e7
¸ %b8 è %e8
¹ %b9 é %e9
º %ba ê %ea
» %bb ë %eb
¼ %bc ì %ec
½ %bd í %ed
¾ %be î %ee
¿ %bf ï %ef
HTTP Status Messages

When a browser requests a service from a web server, an error might occur.
This is a list of HTTP status messages that might be returned:
1xx: Information
Message: Description:
100 Continue Only a part of the request has been received by the server,
but as long as it has not been rejected, the client should
continue with the request
101 Switching Protocols The server switches protocol
2xx: Successful
200 OK The request is OK
201 Created The request is complete, and a new resource is created
202 Accepted The request is accepted for processing, but the processing is
not complete
203 Non-authoritative Information
204 No Content
205 Reset Content
206 Partial Content
3xx: Redirection
300 Multiple Choices A link list. The user can select a link and go to that location.
Maximum five addresses
301 Moved Permanently The requested page has moved to a new url
302 Found The requested page has moved temporarily to a new url
303 See Other The requested page can be found under a different url
304 Not Modified
305 Use Proxy
306 Unused This code was used in a previous version. It is no longer
used, but the code is reserved
307 Temporary Redirect The requested page has moved temporarily to a new url
4xx: Client Error
400 Bad Request The server did not understand the request
401 Unauthorized The requested page needs a username and a password
402 Payment Required You can not use this code yet
403 Forbidden Access is forbidden to the requested page
404 Not Found The server can not find the requested page
405 Method Not Allowed The method specified in the request is not allowed
406 Not Acceptable The server can only generate a response that is not accepted
by the client
407 Proxy Authentication Required You must authenticate with a proxy server before this
request can be served
408 Request Timeout The request took longer than the server was prepared to
wait
409 Conflict The request could not be completed because of a conflict
410 Gone The requested page is no longer available
411 Length Required The "Content-Length" is not defined. The server will not
accept the request without it
412 Precondition Failed The precondition given in the request evaluated to false by
the server
413 Request Entity Too Large The server will not accept the request, because the request
entity is too large
414 Request-url Too Long The server will not accept the request, because the url is too
long. Occurs when you convert a "post" request to a "get"
request with a long query information
415 Unsupported Media Type The server will not accept the request, because the media
type is not supported
416
417 Expectation Failed
5xx: Server Error
500 Internal Server Error The request was not completed. The server met an
unexpected condition
501 Not Implemented The request was not completed. The server did not support
the functionality required
502 Bad Gateway The request was not completed. The server received an
invalid response from the upstream server
503 Service Unavailable The request was not completed. The server is temporarily
overloading or down
504 Gateway Timeout The gateway has timed out
505 HTTP Version Not Supported The server does not support the "http protocol" version
HTML Examples
HTML Basic Tags Examples

How text inside paragraphs is displayed
More paragraphs
The use of line breaks
Poem problems (some problems with HTML formatting)
Heading tags
Insert a horizontal rule
Comments in the HTML source
Add a background color
Examples explained
HTML Formatting Text Examples
Text formatting
Preformatted text (how to control line breaks and spaces)
Different computer-output tags
Insert an address
Abbreviations and acronyms
Text direction
Long and short quotations
How to mark deleted and inserted text
Examples explained
HTML Link Examples
How to create hyperlinks

Set an image as a link
Open a link in a new browser window
Jump to another part of a document (on the same page)
Break out of a frame
How to link to a mail message (will only work if you have mail installed)
A more complicated mailto link
Examples explained
HTML Frame Examples
How to create a vertical frameset with 3 different documents

How to create a horizontal frameset with 3 different documents
How to use the <noframes> tag
How to mix a frameset in rows and columns
Frameset with noresize="noresize"
How to create a navigation frame
Inline frame (a frame inside an HTML page)
Jump to a specified section within a frame
Jump to a specified section with frame navigation
Examples explained
HTML Table Examples
Simple tables
Different table borders
Table with no borders
Headings in a table
Empty cells
Table with a caption
Table cells that span more than one row/column
Tags inside a table
Cell padding (control the white space between cell content and the borders
Cell spacing (control the distance between cells)
Add a background color or a background image to a table
Add a background color or a background image to a table cell
Align the content in a table cell
The frame attribute
The frame and border attributes
Examples explained
HTML List Examples
An unordered list
An ordered list
Different types of ordered lists
Different types of unordered Lists
Nested list
Nested list 2
Definition list
Examples explained
HTML Form and Input Examples
How to create input fields

Password fields
Checkboxes
Radiobuttons
Simple drop-down box (a selectable list)
Another drop-down box with a pre-selected value
Textarea (a multi-line text input field)
Create a button
Draw a border with a caption around data
Form with an input field and a submit button
Form with checkboxes and a submit button
Form with radiobuttons and a submit button
Send e-mail from a form
Examples explained
HTML Image Examples

Insert images
Insert images from another folder or another server
Background image
Align an image within a text
Let the image float to the left/right of a paragraph
Adjust images to different sizes
Display an alternate text for an image (if the browser can't load images)
Make a hyperlink of an image
Create an image-map, with clickable regions
Turn an image into an image map
Examples explained
HTML Background Examples
Good background and text color

Bad background and text color
Good background image
Good background image 2
Bad background image
Examples explained
HTML Style Examples
Styles in the head section of an HTML document

Link that is not underlined
Link to an external style sheet
Examples explained
HTML <head> Examples
Set a title of a document

One target for all links on a page
Examples explained
HTML <meta> Examples
Document description
Document keywords
Redirect a user to another URL
Examples explained
HTML Script Examples
Insert a script
Handle browsers that do not support scripts
Examples explained
1.
<html>
<body>
<p>This is a paragraph.</p>
<p>Paragraph elements are defined by the p tag.</p>
</body>
</html>
2.
<html>
<body>
<p>Paragraph elements are defined by the p tag.</p>
</body>
</html>
3.
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of your browser window. If you
resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>
4.
<html>
<body>
<p>
To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
</p>
</body>
</html>
5.
<html>
<body>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
<p>Note that your browser simply ignores your formatting!</p>
</body>
</html>
6.
<html>
<body>
<h1>This is heading 1</h1>

<p>Use heading tags only for headings. Don't use them just to make something bold. Use
other tags for that.</p>
</body>
</html>
7.
<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>The heading above is aligned to the center of this page. The heading above is aligned
to the center of this page. The heading above is aligned to the center of this page.</p>
</body>
</html>
8.
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<hr>
<hr>
</body>
</html>
9.
<html>
<body>


<p>This is a regular paragraph</p>
</body>
</html>
10.
<html>
<body bgcolor="yellow">
<h2>Look: Colored Background!</h2>
</body>
</html>
Basic HTML Tags

The most important tags in HTML are tags that define headings, paragraphs and line
breaks.
The best way to learn HTML is to work with examples. We have created a very nice HTML
editor for you. With this editor, you can edit the HTML source code if you like, and click on
a test button to view the result.
Try it Yourself - Examples

This example is a very simple HTML document, with only a minimum of HTML tags. It demonstrates
how the text inside a body element is displayed in the browser.
Simple paragraphs
This example demonstrates how the text inside paragraph elements is displayed in the browser.
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines
the smallest heading.
HTML automatically adds an extra blank line before and after a heading.
Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is another paragraph</p>
HTML automatically adds an extra blank line before and after a paragraph.
Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The
<br> tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>
The <br> tag is an empty tag. It has no closing tag.
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored
by the browser. You can use comments to explain your code, which can help you when you edit the
source code at a later date.
Note that you need an exclamation point after the opening bracket, but not before the closing
bracket.
When you write HTML text, you can never be sure how the text is displayed in another browser.
Some people have large computer displays, some have small. The text will be reformatted every
time the user resizes his window. Never try to format the text in your editor by adding empty lines
and spaces to the text.
HTML will truncate the spaces in your text. Any number of spaces count as one. Some extra
information: In HTML a new line counts as one space.
Using empty paragraphs <p> to insert blank lines is a bad habit. Use the <br> tag instead. (But
don't use the <br> tag to create lists. Wait until you have learned about HTML lists.)
You might have noticed that paragraphs can be written without the closing tag </p>. Don't rely on
it. The next version of HTML will not allow you to skip ANY closing tags.
HTML automatically adds an extra blank line before and after some elements, like before and after a
paragraph, and before and after a heading.
We use a horizontal rule (the <hr> tag), to separate the sections in our tutorials.
More Examples
More paragraphs
This example demonstrates some of the default behaviors of paragraph elements.
Line breaks
This example demonstrates the use of line breaks in an HTML document.
Poem problems
This example demonstrates some problems with HTML formatting.
Headings
This example demonstrates the tags that display headings in an HTML document.

This example demonstrates a center aligned heading.
Horizontal rule
This example demonstrates how to insert a horizontal rule.
Hidden comments
This example demonstrates how to insert a hidden comment in the HTML source code.
Background color
This example demonstrates adding a background-color to an HTML page.
Basic HTML Tags
Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
<!DOCTYPE ...>
<A ...> Anchor HREF: URL you are linking to

NAME: name a section of the page
TARGET = "_blank" | "_parent" | "_self" | "_top"
| window name
which window the document should go in
TITLE: suggested title for the document to be
opened
onClick: script to run when the user clicks on this
anchor
onMouseOver: when the mouse is over the link
onMouseOut: when the mouse is no longer over
the link
ACCESSKEY
<ADDRESS>
<APP ...>
<APPLET ...> CODE: the applet to run
CODEBASE: path to the applet class
WIDTH: width of the applet
HEIGHT: height of the applet
ALIGN = LEFT | RIGHT | TOP | MIDDLE | BOTTOM |
BASELINE
alignment of applet to surrounding text
VSPACE: vertical space between applet and
surrounding text
HSPACE: horizontal space between applet and
surrounding text
BORDER: empty space surrounding the applet
NAME:name of applet for reference by other
applets
ARCHIVE: a compressed collection of applet
components
MAYSCRIPT: If Java can use JavaScript
<AREA ...> HREF: URL you are linking to
ALT: alternate text if the image isn't displayed
SHAPE = RECT | CIRCLE | POLY | DEFAULT
what shape is this area?
COORDS: coordinates for the link area shape
TITLE: Short description of the area
TARGET: what frame to go to
NOHREF: this area is not a link
onClick: script action when the user clicks this
area
onMouseOver
onMouseOut
<B> Bold
<BASE ...> Base Address HREF: default address for hypertext links
| frame name
default window for linked documents
<BASEFONT ...> SIZE
COLOR
FACE
<BGSOUND ...> SRC: URL of the sound
LOOP= INFINITE | number of loops
how many times to play the sound
<BIG>
<BLINK>
<BLOCKQUOTE ...> Block Quote

<BODY ...> BGCOLOR: background color of the page
BACKGROUND: background picture for the page
TEXT: color of the text on the page
LINK: color of links that haven't been followed yet
VLINK: color of links that have been followed
ALINK: color of links while you are clicking on
them
BGPROPERTIES = FIXED
if the background image should not scroll
TOPMARGIN: size of top and bottom margins
LEFTMARGIN: size of left and right margins
MARGINHEIGHT: size of top and bottom margins
MARGINWIDTH: size of left and right margins
onLoad: Script to run once the page is fully loaded
onUnload
onFocus
onBlur
STYLESRC: MS FrontPage extension
SCROLL = YES | NO
If the document should have a scroll bar
<BR ...> Line Break CLEAR = LEFT | RIGHT | ALL | BOTH
go past a picture or other object
<BUTTON ...> TYPE = BUTTON | SUBMIT | RESET
what type of button is this
onClick: script to run when the user clicks here
NAME: name of this button element
VALUE: the value sent with the form
DISABLED: disable this button
ACCESSKEY: shortcut key for this button
TABINDEX: tab order
<CAPTION ...> ALIGN = TOP | BOTTOM | LEFT | RIGHT
alignment of caption to table
VALIGN = TOP | BOTTOM
if caption should be above or below table
<CENTER ...>
<CITE> Citation
<CODE>
<COL ...> Column SPAN: how many columns this affects

ALIGN = LEFT | CENTER | RIGHT | JUSTIFY
horizontal alignment
WIDTH: width of the column
BGCOLOR: background color of the column
<COLGROUP ...> Column Group SPAN: how many columns this affects
ALIGN: alignment of cell contents
WIDTH: Width of the column group
<COMMENT>
<DD> Definition Description

<DEL> Deleted
<DFN> Definition
<DIR ...> Directory List
<DIV ...> ALIGN = LEFT | CENTER | RIGHT | JUSTIFY
text alignment
<DL ...> Definition List COMPACT: take up less space
<DT> Definition Term
<EM> Emphasis
<EMBED ...> SRC: URL of resource to be embedded
WIDTH: width of area in which to show resource
HEIGHT: height of area in which to show resource
ALIGN = ABSBOTTOM | ABSMIDDLE | MIDDLE | TEXTTOP
| RIGHT | LEFT | BASELINE | CENTER | BOTTOM | TOP
how text should flow around the picture
NAME: name of the embedded object
PLUGINSPAGE: where to get the plugin software
PLUGINURL: where to get the JAR archive for
automatic installation
HIDDEN = FALSE | TRUE
if the object is visible or not
HREF: make this object a link
TARGET: frame to link to
AUTOSTART = TRUE | FALSE
if the sound/movie should start automatically
LOOP = TRUE | FALSE | # of loops
how many times to play the sound/movie
PLAYCOUNT: how many times to play the
sound/movie
VOLUME: how loud to play the sound
CONTROLS = VOLUMELEVER | STOPBUTTON |
PAUSEBUTTON | PLAYBUTTON | SMALLCONSOLE |
CONSOLE
which sound control to display
CONTROLLER = TRUE | FALSE
if controls should be displayed
MASTERSOUND: indicates the object in a sound
group with the sound to use
STARTTIME: how far into the sound to start and
stop
ENDTIME: when to finish playing
<FIELDSET>
<FONT ...> SIZE: size of the font
COLOR: color of the text
FACE: set the typestyle for text
POINT-SIZE
WEIGHT
<FORM ...> ACTION: URL of the CGI program
METHOD = GET | POST
how to transfer the data to the CGI
NAME: name of this form
ENCTYPE = "multipart/form-data" |
"application/x-www-form-urlencoded" |
"text/plain"
what type of form this is
| frame name
what frames to put the results in
onSubmit: script to run before the form is
submitted
onReset: script to run before the form is reset
<FRAME ...> SRC: what file to put in the frame
NAME: the name of the frame
SCROLLING = YES | NO | AUTO
should the frame have a scrollbar?
NORESIZE: don't let the user make the frame
bigger or smaller
FRAMEBORDER = YES | 1 | NO | 0
should this frame have a border?
BORDERCOLOR: color of the surrounding border
MARGINWIDTH: the internal left and right margins
for the frame
MARGINHEIGHT: the internal top and bottom
margins for the frame
<FRAMESET ...> COLS: how many cols in the frameset
ROWS: how many rows in the frameset
FRAMEBORDER = YES | 1 | NO | 0
if the frames should have borders
FRAMESPACING: space between the frames
BORDER: space between frames
BORDERCOLOR: color of frame borders
<H# ...> Headers<H1 ...>, <H2 ALIGN = LEFT | RIGHT | CENTER | JUSTIFY
...>, <H3 ...>, alignment
<H4 ...>,
<H5 ...>,
<H6 ...>
<HEAD>
<HR ...> Horizontal Rule NOSHADE: don't use shadow effect

SIZE: height
WIDTH: horizontal width of the line
ALIGN = LEFT | RIGHT | CENTER
horizontal alignment of the line
COLOR: color of the line
<HTML>
<HTMLPLUS ...>
<HYPE>
<I> Italics
<IFRAME ...> Inline Frame SRC: URL of the document to go in the frame
HEIGHT: height of the inline frame
WIDTH: width of the inline frame
NAME: name of this inline frame
LONGDESC: URL of a long description of the
contents of the frame
FRAMEBORDER = 1 | 0
if the frame should have a border around it
MARGINWIDTH: internal left/right margin for the
frame
MARGINHEIGHT: internal top/bottom margin for the
frame
SCROLLING = YES | NO | AUTO
if the frame should have scroll bars
ALIGN = LEFT | RIGHT | TOP | TEXTTOP | MIDDLE |
ABSMIDDLE | CENTER | BOTTOM | ABSBOTTOM |
BASELINE
alignment of the frame object to text around it
VSPACE: space above and below the frame
HSPACE: space to the left and right of the frame
<IMG ...> Image SRC: where to get the picture
ALT: text to show if you don't show the picture
NAME
LONGDESC: URL of a long description of the image
WIDTH: how wide is the picture
HEIGHT: how tall is the picture
ABSMIDDLE | BOTTOM | ABSBOTTOM | BASELINE
BORDER: border around the picture
HSPACE: horizontal distance between the picture
and the text
VSPACE: vertical distance between the picture and
the text
ISMAP: is this a clickable map?
USEMAP: name of the map definition
LOWSRC: a version of the picture that isn't such a
big file
NATURALSIZEFLAG: meaningless
NOSAVE: meaningless
DYNSRC: play a movie file
CONTROLS: show the buttons which control the
movie
LOOP = INFINITE | -1 | # of loops
how many times to loop the movie
START = FILEOPEN | MOUSEOVER
when to start playing the movie
onLoad: script to runs after the image is
downloaded
SUPPRESS = TRUE | FALSE
Don't show icons of images that haven't
downloaded yet
<INPUT ...> TYPE = TEXT | CHECKBOX | RADIO | PASSWORD | HIDDEN
| SUBMIT | RESET | BUTTON | FILE | IMAGE
what type of field
NAME: name of this form field
VALUE: initial or only value of this field
SIZE: how wide the text field should be
MAXLENGTH: maximum number of characters
CHECKED: check this checkbox or radio button
BORDER: border around image
SRC: URL of image
ALT: text to show if you don't show the picture
LOWSRC: a version of the picture that isn't such a
big file
WIDTH: width of image
HEIGHT: height of image
ABSMIDDLE | CENTER | BOTTOM | ABSBOTTOM |
BASELINE
VSPACE: vertical distance between the picture and
the text
HSPACE: horizontal distance between the picture
and the text
READONLY: the value of this field cannot be
changed
DISABLED: don't let the user do anything with this
field
ACCESSKEY
TABINDEX: tab order
LANGUAGE = "JavaScript" | "JavaScript1.1" |
"JSCRIPT" | "VBScript" | "VBS" | other language
scripting language to use
onClick: when the user clicks here
onChange: when this field is changed
onFocus: when this field gets the focus
onBlur: when this field loses the focus
onKeyPress: script to run when a key is pressed
onKeyUp: script for when a key goes up while the
field has the focus
<INS> Inserted<DEL>
<ISINDEX ...> PROMPT: prompt string to show before the text
entry area
ACTION: the CGI to call
<KBD> Keyboard
<LABEL ...> FOR: form element for which this is a label
<LEGEND ...> ALIGN = RIGHT | CENTER | LEFT
<LI ...> List Item TYPE = DISC | CIRCLE | SQUARE | 1 | A | a | I | i
type of bullet or numeral
VALUE: where to continue counting
<LINK ...> REL: relationship to this page
REV: reverse relationship to this page
HREF: URL of related document
TITLE: suggested title
MEDIA = SCREEN | PRINT | PROJECTION | AURAL |
BRAILLE | ALL | other media
What media type the link applies to
TYPE: MIME type of linked resource
<LISTING>
<MAP ...> NAME: name of this map
<MARQUEE ...> WIDTH: how wide the marquee is
HEIGHT: how tall the marquee is
DIRECTION = LEFT | RIGHT
which direction the marquee should scroll
BEHAVIOR = SCROLL | SLIDE | ALTERNATE
what type of scrolling
SCROLLDELAY: how long to delay between each
jump
SCROLLAMOUNT: how far to jump
LOOP = INFINITE | number of loops
how many times to loop
BGCOLOR: background color
HSPACE: horizontal space around the marquee
VSPACE: vertical space around the marquee
<MENU ...>
<META ...> NAME = KEYWORDS | DESCRIPTION | REFRESH | many
others
The pupose of this META tag
HTTP-EQUIV: Name of the pretend HTTP header
CONTENT: Metainformation content
<MULTICOL ...> COLS: how many columns
GUTTER: space between columns
WIDTH: width of a single column
<NOBR> No Break
<NOEMBED>
<NOFRAMES>
<NOSCRIPT>
<OL ...> Ordered List TYPE =1|A|a|I|i

type of numerals
START: where to start counting
<OPTION ...> VALUE: what's the value if this option is chosen
SELECTED: this option is selected by default
<P ...> Paragraph ALIGN = LEFT | CENTER | RIGHT | JUSTIFY
alignment of text within the paragraph
CLEAR = LEFT | RIGHT | ALL | BOTH
move past picture and other objects
<PARAM ...> Parameter NAME: name of the parameter
VALUE: value of the parameter
<PLAINTEXT>
<PRE ...> Preformatted Text

<S> Strikeout
<SAMP> Sample
<SCRIPT ...> TYPE = "text/javascript" | "text/vbscript" |
other scripting language
Which scripting language to use
SRC: External source for script
DEFER: Continue loading page while downloading
script
LANGUAGE = JAVASCRIPT | LIVESCRIPT | VBSCRIPT |
other
Deprecated indicator of language
FOR: object for which this script is an event
handler
EVENT: the event this script handles
<SELECT ...> NAME: name of this form element
MULTIPLE: allow more than one choice
SIZE: how many options to show
READONLY: don't let the user change the value of
this field
field
"VBScript" | other language
scripting language to use
onChange: what to do when a new option is
selected
TABINDEX: tab order
onFocus: script to run when this field gets the
focus
onBlur: script to run when this field loses the
focus
<SMALL>
<SOUND ...>
<SPACER ...> TYPE = HORIZONTAL | VERTICAL | BLOCK
what type of space is this
ALIGN = LEFT | RIGHT
align left or right
SIZE: how tall or wide
WIDTH: how wide
HEIGHT: how tall
<SPAN ...>
<STRIKE> Strikeout<S>
<STRONG>
<STYLE ...> TYPE: style language
MEDIA: type of media this syle applies to
<SUB> Subscript
<SUP> Superscript
<TABLE ...> BORDER: size of border around the table
CELLPADDING: space between the edge of a cell
and the contents
CELLSPACING: space between cells
WIDTH: width of the table as a whole
BGCOLOR: color of the background
BACKGROUND: picture to use as background
ALIGN = LEFT | RIGHT
alignment of table to surrounding text
HSPACE: horizontal space between table and
surrounding text
VSPACE: vertical space between table and
surrounding text
HEIGHT: height of the table as a whole
FRAME = VOID | BOX | BORDER | ABOVE | BELOW | LHS |
RHS | HSIDES | VSIDES
parts of outside border that are visible
RULES = NONE | ALL | COLS | ROWS | GROUPS
if there should be internal borders
BORDERCOLOR: color of border around the table
BORDERCOLORLIGHT: color of "light" part of border
around the table
BORDERCOLORDARK: color of "dark" part of border
around the table
SUMMARY: Summary of the purpose of the table
<TBODY ...> Table Body Section
<TD ...> Table Data ALIGN = LEFT | CENTER | MIDDLE | RIGHT
horizontal alignment of cell contents
VALIGN = TOP | MIDDLE | CENTER | BOTTOM | BASELINE
vertical alignment of cell contents
WIDTH: width of cell
HEIGHT: height of cell
COLSPAN: number of columns to cover
ROWSPAN: number of rows to cover
NOWRAP: don't word wrap
BGCOLOR: color of the background
BORDERCOLOR: color of border around the table
around the table
around the table
BACKGROUND: picture to use as background
<TEXTAREA ...> NAME: name of this form field
COLS: how many characters wide
ROWS: how many rows
WRAP = SOFT | HARD | OFF
how to wrap the text
READONLY: don't let the user change the contents
of the field
field
TABINDEX: tab order
"VBScript" | other language
scripting language
onChange: Script to run when the user has
changed the textarea
onKeyPress: script to run when a key is pressed
<TFOOT ...> Table Footer
Section
<TH ...> Table Header
<THEAD ...> Table Header
Section<TBODY ...>, <TFOOT
...>
<TITLE>
<TR ...> Table Row ALIGN = LEFT | CENTER | RIGHT

horizontal alignment of cell contents
HALIGN = LEFT | CENTER | RIGHT
VALIGN = TOP | MIDDLE | BOTTOM | BASELINE
vertical alignment of cell contents
BGCOLOR: background color
BACKGROUND: background image
BORDERCOLOR: color of border around each cell
around each cell
around each cell
<TT> Teletype
<U> Underline
<UL ...> Unordered List TYPE = DISC | CIRCLE | SQUARE
type of bullets
<VAR> Variable
<WBR>
<XMP>

HTML W3schools

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML W3schools

Uploaded by

Copyright:

Available Formats

Introduction to HTML

What is an HTML File?

• HTML stands for Hyper Text Markup Language

Do You Want to Try It?

If you are running Windows, start Notepad.

If you are on a Mac, start SimpleText.

Type in the following text:

Save the file as "mypage.htm".

HTM or HTML Extension?

With newer software we think it will be perfectly safe to use .html.

Note on HTML Editors:

Frequently Asked Questions

Q: What browser should I use?

Q: Does my computer have to run Windows? What about a Mac?

HTML elements are defined using HTML tags.

• HTML tags are used to mark-up HTML elements

Remember the HTML example from the previous page:

This is an HTML element:

<b>This text is bold</b>

The HTML element starts with a start tag: <b>

This is also an HTML element:

Why do We Use Lowercase Tags?

Attributes always come in name/value pairs like this: name="value".

Attributes are always specified in the start tag of an HTML element.

Always Quote Attribute Values

name='John "ShotGun" Nelson'

Basic HTML Tags

Try it Yourself - Examples

A very simple HTML document

(You can find more examples at the bottom of this page)

Paragraphs are defined with the <p> tag.

<p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.

Basic Notes - Useful Tips

Center aligned heading

Basic HTML Tags

HTML Text Formatting

"Computer output" tags

Abbreviations and acronyms

Deleted and inserted text

How to View HTML Source

Text Formatting Tags

"Computer Output" Tags

Citations, Quotations, and Definition Tags

HTML Character Entities

Note that the entities are case sensitive.

The most common character entity in HTML is the non-breaking space.

The Most Common Character Entities:

Result Description Entity Name Entity Number

Some Other Commonly Used Character Entities:

Result Description Entity Name Entity Number

(You can find more examples at the bottom of this page)

The Anchor Tag and the Href Attribute

The syntax of creating an anchor:

This anchor defines a link to W3Schools:

<a href="http://www.w3schools.com/">Visit W3Schools!</a>

The line above will look like this in a browser:

The Target Attribute

The Anchor Tag and the Name Attribute

Below is the syntax of a named anchor:

<a name="label">Text to be displayed</a>

The line below defines a named anchor: